import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
import HOST from '../../utils/const'
import useTitle from '../../hooks/useTitle';
import Problems from './components/problems/index'
import './index.css';

function Test() {
  useTitle(Test.title);
  const [test, setTest] = useState(false);
  const [math, setMath] = useState(0);
  const [phy, setPhy] = useState(0);
  const [contest, setContest] = useState(null);

  const chest = (string) => {
    const questions = [];
    const res = string.slice(7);
    res.split('\n').map((item)=>{
      const ans = item.split('$');
      item && questions.push(
        {
        question: ans[0],
        answer: [ans[1].split('=').pop(),ans[2].split('=').pop(),ans[3].split('=').pop(),ans[4].split('=').pop()]
      }
      )
      return item;
    })  
    return questions;
  }
// eslint-disable-next-line
  const getTests = ()=>{
    const usn = localStorage.getItem('username')
    axios.get(HOST+`/method/contest?username=${usn}&math=${math}&physical=${phy}`).then((res)=>{
      switch (res.data.split('\n')[0]) {
        case 'code=5': {
          alert('获取失败');
          break;
        }
        case 'code=6' :{
          alert('获取成功');
          setContest(chest(res.data));
          console.log(res);
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err)=>{
      console.log(err);
    });
  }

  useEffect(() => {
    if(contest === null) return;
    setTest(true);
  }, [contest])
  return test ? <Problems detail={contest}/> :(
    <div className='test'>
      <div className='left-test'>
        <div className='test-left-item'>测试</div>
      </div>
      <div className='right-test'>
        <div className='test-topbar'>
          请选择测试题
        </div>
        <div className='choose-test'>
          <div className='subject'>
            <div className='subject-item'>内科</div>
            <div className='problem-number'>
              <div className='problem-jian' onClick={()=>{if(math>0)setMath(math-1)}}>-</div>
              <div className='problem-number-detail math-number'>{math}</div>
              <div className='problem-jia' onClick={()=>{setMath(math+1)}}>+</div>
            </div>
          </div>
          <div className='subject'>
            <div className='subject-item'>外科</div>
            <div className='problem-number'>
              <div className='problem-jian' onClick={()=>{if(phy>0)setPhy(phy-1)}}>-</div>
              <div className='problem-number-detail  phy-number'>{phy}</div>
              <div className='problem-jia' onClick={()=>{setPhy(phy+1)}}>+</div>
            </div>
          </div>
        </div>
        <div className='test-footbar'>
          <div className='test-button' onClick={getTests}>去测试</div>
        </div>
      </div>
    </div>
  );
}

Test.path = '/test';
Test.title = '小测试';
Test.meta = {
  keywords:
    '测试',
  description:
    '宠物医院 学习知识 测试 小测验'
};
Test.exact = true;

export default Test;
